<template>
  <MenuBar></MenuBar>
  <div class="logos">
    <VueLogo></VueLogo>
    <div>+</div>
    <PiniaLogo></PiniaLogo>
    <div>+</div>
    <ViteLogo></ViteLogo>
    <div>+</div>
    <TsLogo></TsLogo>
    <div>+</div>
    <ElectronLogo></ElectronLogo>
    <div>+</div>
    <ElementLogo></ElementLogo>
  </div>
  <div class="the-welcome">
    <svg alt="Vue logo" src="@/assets/vue.svg" />
    <TheWelcome />
  </div>
</template>
<style lang="scss" scoped>
.the-welcome {
  text-align: center;
  // padding: 20px;
  padding: {
    left: 20px;
    right: 20px;
    top: 0;
  }
}
.logos {
  display: flex;
  justify-content: center;
  font-size: 50px;
  font-weight: 500;
  align-items: center;
}
</style>
